//字体使用
.px2px(@name, @px){
  @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
    @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
    @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for Nexus 5X
  [data-dpr="2.6"] & {
    @{name}: round(@px * 2.6 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
    @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
    @{name}: round(@px / 2 * 3) * 1px
  }
  // for 三星note4
  [data-dpr="4"] & {
    @{name}: @px * 2px;
  }
}
//普通单位转换 
//75是基准值 可以理解为设计图除以10
//rem = document.documentElement.clientWidth * dpr / 10
//例如 苹果6  375*2 / 10  = 75
.px2rem(@name, @px){
  @{name}: @px / 75 * 1rem;
}
/*
sublime 个人快捷
myless Tab   = .px2rem(@name, @px);
*/
/*
css类型名约定  方便以开头分辨
框架css                     f- 开头
模块css                     m- 开头
按钮css                     p- 开头
公用less                   my- 开头
css部分名字简写约定

button      按钮           简写为 btn
banner      主图           简写为 ban
back        背景           简写为 bac
content     内容           简写为 con
comment     评论           简写为 com
hint        提示           简写为 hin
intro       简介           简写为 intr
item        单个对象       简写为 ite
label       标签           简写为 lab
icon        图标           简写为 ico
link        连接           简写为 lin
list        列表           简写为 lis
logo        商标           简写为 log
menu        菜单           简写为 men
message     消息           简写为 mes
nav         头部导航       简写为 nav
photo       照片           简写为 pho
serch       搜索           简写为 ser
status      状态           简写为 sta
text        文字           简写为 tex
time        时间           简写为 tim
title       标题           简写为 til
wrapper     包裹层         简写为 wra

*/

//---------------------less变量-------------------
//按钮统一使用 display:inline-block;
//文字颜色
@blue:#0e90d2;
@blue1:#3bb4f2;
@text1:#333;
@text2:#555;
@text3:#777;
@text4:#8c8c8c;
@text5:#aaa;
@border:#eee;

//--------------------less方法-----------------------------
//左右内边距24 方法
.padding-l-r(@px1: 0,@px2: 0){
  padding-top:@px1 / 75 * 1rem ;
  padding-right:24 / 75 * 1rem ;
  padding-bottom:@px2  / 75 * 1rem ;
  padding-left:24 / 75 * 1rem;
}
.padding-w(@px1:0,@px2:0,@px3:0,@px4:0){
  padding-top:@px1 / 75 * 1rem ;
  padding-right:@px2 / 75 * 1rem ;
  padding-bottom:@px3  / 75 * 1rem ;
  padding-left:@px4 / 75 * 1rem;
}
//左右外边距24 方法
.margin-l-r(@px1: 0,@px2: 0){
  margin-top:@px1 / 75 * 1rem ;
  margin-right:24 / 75 * 1rem ;
  margin-bottom:@px2  / 75 * 1rem ;
  margin-left:24 / 75 * 1rem;
}
//左右auto
.margin-a(@px1: 0,@px2: 0){
  margin-top:@px1 / 75 * 1rem;
  margin-right:auto;
  margin-bottom:@px2  / 75 * 1rem;
  margin-left:auto;
}
.margin-w(@px1:0,@px2:0,@px3:0,@px4:0){
  margin-top:@px1 / 75 * 1rem ;
  margin-right:@px2 / 75 * 1rem ;
  margin-bottom:@px3  / 75 * 1rem ;
  margin-left:@px4 / 75 * 1rem;
}
//字体行高一样
.set-font(agr,@font,@color:inherit){
  .px2px(font-size,@font);
  .px2px(line-height,@font);
  color:@color;
}
//行高和父级一样
.set-font(middle,@font,@line,@color:inherit){
  .px2px(font-size,@font);
  .px2rem(line-height,@line);
  color:@color;
}
//Y轴上剧中 靠左还是靠右
.Y-middle(l,@l:0){
  position: absolute;
  top:50%;
  .px2rem(left,@l);
  -ms-transform:translate(0,-50%);
  -moz-transform:translate(0,-50%);
  -o-transform:translate(0,-50%);
  -webkit-transform:translate(0,-50%);
  transform:translate(0,-50%); 
}
.Y-middle(r,@r:0){
  position: absolute;
  top:50%;
  .px2rem(right,@r);
  -ms-transform:translate(0,-50%);
  -moz-transform:translate(0,-50%);
  -o-transform:translate(0,-50%);
  -webkit-transform:translate(0,-50%);
  transform:translate(0,-50%);
}
//分割的竖线
.p-line(@size,@top:-2,@color:inherit){
  display: inline-block;
  .px2rem(margin-top,@top);
  .px2px(font-size,@size);
  color:@color;
  vertical-align: top;    
}
//椭圆按钮 
.p-ellipse(@w,@h,@bc,@f,@c){
  display: inline-block;
  .px2rem(width,@w);
  .px2rem(height,@h);
  background-color:@bc;
  .px2rem(border-radius,@h/2);
  .set-font(middle,@f,@h,@c);
  text-align: center;
  cursor:pointer;
}
//圆
.p-round(@w){
  .px2rem(width,@w);
  .px2rem(height,@w);
  border-radius: 50%;
}

//-------------------------公用less----------------------------
//超长截取出省略号
.my-ellipsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
//箭头
.my-arrow{
  .px2rem(width,14);
  .px2rem(height,14);
  border-color:#ffffff;
  border-style:solid;
  .px2rem(border-right,4);
  .px2rem(border-bottom,4);
}


